import React from 'react';
import { Row, Col, Form } from 'antd';
import { FirstHeaderC, SecondHeaderC, PrimaryC, RateRangeC, FormItemLayout } from '@/src/components';

class RateRangeDemoC extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      dataRange: undefined,
      rangeValue: undefined,
    };

    setTimeout(() => {
      this.setState({
        rangeValue: 'A-',
      });
    }, 5000);
  }

  change = () => {
    this.setState(
      {
        dataRange: ['BB', 'BB-', 'B+', 'B', 'B-'],
      },
      () => {
        this.state.RateRangeC.setSelect('BB');
      },
    );
  };

  ref1 = React.createRef();

  ref2 = React.createRef();

  ref3 = React.createRef();

  ref4 = React.createRef();

  ref5 = React.createRef();

  ref6 = React.createRef();

  render() {
    return (
      <Row style={{ padding: '20px' }}>
        <FirstHeaderC title='评级组件' />
        <Col span={8}>
          <SecondHeaderC title='基本场景' />
          <Form ref={this.ref1}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref1.current}
              title='债项信用评级' // 显示名称
              dataIndex={'startRate1'}
              onChange={(e) => console.log(e)}
              helper={'选择'} // 提示帮助信息
            />
          </Form>
        </Col>
        <Col span={8}>
          <SecondHeaderC title='有初始化值' />
          <Form ref={this.ref2}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref2.current}
              title='主体信用评级' // 显示名称
              dataIndex={'startRate2'}
              initialValue={'AAA'} // 初始默认值
              onChange={(e) => console.log(e)}
              dataRange={['AAA', 'AA+', 'AA', 'AA-', 'A+', 'A', 'A-', 'BBB+', 'BBB', 'BBB-', 'BB+', 'BB', 'BB-', 'B+', 'B', 'B-', 'CCC+', 'CCC', 'CCC-', 'CC', 'C', 'D']} // 数据选择包含等级
            />
          </Form>
        </Col>
        <Col span={8}>
          <SecondHeaderC title='修改选择范围' />
          <Form ref={this.ref3}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref3.current}
              dataIndex={'startRate3'}
              title='主体信用评级' // 显示名称
              onChange={(e) => console.log(e)}
              dataRange={['A+', 'A', 'A-', 'BBB+', 'BBB', 'BBB-', 'BB+', 'BB', 'BB-', 'B+', 'B', 'B-']}
            />
          </Form>
        </Col>
        <Col span={8}>
          <SecondHeaderC title='禁用' />
          <Form ref={this.ref4}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref4.current}
              dataIndex={'startRate4'}
              title='主体信用评级' // 显示名称
              onChange={(e) => console.log(e)}
              dataRange={['A+', 'A', 'A-', 'BBB+', 'BBB', 'BBB-', 'BB+', 'BB', 'BB-', 'B+', 'B', 'B-']} // 数据选择包含等级
              disabled={true}
            />
          </Form>
        </Col>
        <Col span={8}>
          <SecondHeaderC title='异步加载/数据选择包含等级' />
          <Form ref={this.ref5}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref5.current}
              dataIndex={'startRate5'}
              onChange={(e) => console.log(e)}
              title='主体信用评级'
              initialValue={this.state.rangeValue} // 初始默认值
              onRef={(ref) => this.setState({ RateRangeC: ref })}
              dataRange={this.state.dataRange} // 数据选择包含等级
            />
          </Form>
          <PrimaryC title='点击更改' onClick={this.change} />
        </Col>
        <Col span={8}>
          <SecondHeaderC title='无title' />
          <Form ref={this.ref6}>
            <RateRangeC
              formItemLayout={FormItemLayout}
              form={this.ref6.current}
              dataIndex={'startRate1'}
              onChange={(e) => console.log(e)}
              helper={'选择'} // 提示帮助信息
            />
          </Form>
        </Col>
      </Row>
    );
  }
}

export default RateRangeDemoC;
